<template>
  <div style="font-size: 16px;font-weight: 600;">
    <el-radio></el-radio>呼叫中心
  </div>
  <!-- 拨打电话 -->
  <div style="margin-top: 10px;">
    <el-form-item>
      <label style="margin-right: 10px;">选择主叫号码:</label>
      <el-col :span="3.5">
        <el-cascader :options="options2iphone" v-model="state.dataForm.caller2"
          style="margin-right: 10px; width: 230px;" clearable></el-cascader>
      </el-col>
      <el-col :span="3.5">
        <el-input placeholder="请输入被叫号码" style="width: 210px;" v-model="state.dataForm.callee2" clearable></el-input>
      </el-col>
      <el-col :span="3.5">
        <el-button type="primary" style="margin-left: 10px;" @click="makeCall()">拨打电话</el-button>
      </el-col>
    </el-form-item>
  </div>
  <el-form :inline="true" :model="state.dataForm" @keyup.enter="state.getDataList()" style="margin-top: 10px;">
    <el-form-item>
      <el-select v-model="state.dataForm.directionId" placeholder="请选择呼叫类型" clearable>
        <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.id">
          {{ item.name }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="state.dataForm.endStatusId" placeholder="请选择状态" clearable>
        <el-option v-for="item in options2" :key="item.name" :label="item.name" :value="item.id">
          {{ item.name }}
        </el-option>
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-input v-model="state.dataForm.caller" placeholder="主叫号码" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="state.dataForm.callee" placeholder="被叫号码" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-input v-model="state.dataForm.userName" placeholder="姓名" clearable></el-input>
    </el-form-item>
    <el-form-item>
      <el-date-picker v-model="state.dataForm.startDate" type="date" placeholder="开始日期"
        style="width: 180px"></el-date-picker>
    </el-form-item>
    <el-form-item label-width="0px">
      <el-date-picker v-model="state.dataForm.endDate" type="date" placeholder="结束日期"
        style="width: 180px"></el-date-picker>
    </el-form-item>
    <!-- 查询 -->
    <el-form-item>
      <el-button @click="state.getDataList()" type="primary">{{ $t("query") }}</el-button>
    </el-form-item>
    <!-- 重置 -->
    <el-form-item>
      <el-button @click="reset()" type="primary">重置</el-button>
    </el-form-item>
    <el-table :header-cell-style="{ 'background': '#eef1f6', 'color': '#1f2d3d', 'border-color': '#dfe6ec' }"
      v-loading="state.dataListLoading" :data="state.dataList" border
      @selection-change="state.dataListSelectionChangeHandle" style="width: 100%">
      <el-table-column align="center" prop="time" label="时间" width="160" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="direction" label="呼叫类型" width="120" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="row.direction === '0'">呼入</span>
          <span v-else-if="row.direction === '1'">呼出</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="caller" label="主叫号码" width="180" show-overflow-tooltip>
        <template v-slot="scope">
          <!--去除0086-->
          <span v-if="scope.row.caller">{{scope.row.caller? scope.row.caller.replace('0086', '') : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="callee" label="被叫号码" width="180" show-overflow-tooltip>
        <template v-slot="scope">
          <!--去除0086-->
          <span v-if="scope.row.callee">{{scope.row.callee? scope.row.callee.replace('0086', '') : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="endStatus" label="接入状态" width="180" show-overflow-tooltip>
        <template #default="{ row }">
          <span v-if="row.endStatus === '0'">错误</span>
          <span v-else-if="row.endStatus === '1'">正常结束</span>
          <span v-else-if="row.endStatus === '2'">未接通</span>
          <span v-else-if="row.endStatus === '17'">坐席未接</span>
          <span v-else-if="row.endStatus === '100'">黑名单</span>
          <span v-else-if="row.endStatus === '101'">坐席转接</span>
          <span v-else-if="row.endStatus === '102'">VR 期间用户放弃</span>
          <span v-else-if="row.endStatus === '103'">会话排队期间用户放弃</span>
          <span v-else-if="row.endStatus === '104'">会话振铃期间用户放弃</span>
          <span v-else-if="row.endStatus === '105'">无坐席在线</span>
          <span v-else-if="row.endStatus === '106'">非工作时间</span>
          <span v-else-if="row.endStatus === '107'">IVRH后直接结束</span>
          <span v-else-if="row.endStatus === '201'">未知状态</span>
          <span v-else-if="row.endStatus === '202'">未接听</span>
          <span v-else-if="row.endStatus === '203'">拒绝挂断</span>
          <span v-else-if="row.endStatus === '204'">关机</span>
          <span v-else-if="row.endStatus === '205'">空号</span>
          <span v-else-if="row.endStatus === '206'">通话中</span>
          <span v-else-if="row.endStatus === '207'">欠费</span>
          <span v-else-if="row.endStatus === '208'">运营商线路异常</span>
          <span v-else-if="row.endStatus === '209'">主叫取消</span>
          <span v-else-if="row.endStatus === '210'">不在服务区</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="duration" label="通话时长(秒)" width="120"
        show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="userName" label="姓名" width="110" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="dept" label="部门" width="130" show-overflow-tooltip></el-table-column>
      <el-table-column align="center" prop="userId" label="客服工号" width="160" show-overflow-tooltip>
        <template v-slot="scope">
          <span v-if="scope.row.userId">80{{ scope.row.userId }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" prop="recordUrl" label="录音" show-overflow-tooltip width="280">
        <template v-slot="scope">
          <div v-if="scope.row.recordUrl == null || scope.row.recordUrl == ''"></div>
          <audio v-else :src="scope.row.recordUrl" type="audio/mpeg" controls class="video"></audio>
        </template>
      </el-table-column>
    </el-table>
  </el-form>
  <el-pagination :current-page="state.page" :page-sizes="[10, 20, 50, 100]" :page-size="state.limit"
    :total="state.total" layout="total, sizes, prev, pager, next, jumper" @size-change="state.pageSizeChangeHandle"
    @current-change="state.pageCurrentChangeHandle"> </el-pagination>
  <!-- 弹窗, 新增 / 修改 -->
  <add-or-update :key="addKey" ref="addOrUpdateRef" @refreshDataList="state.getDataList"></add-or-update>
</template>
<script lang="ts" setup>
import baseService from "@/service/baseService";
import { ElMessage } from "element-plus"
import { useRouter } from 'vue-router'
import useView from "@/hooks/useView";
import { nextTick, reactive, ref, toRefs, watch } from "vue";
import AddOrUpdate from "./blacklist-list-add-update.vue";
const view = reactive({
  getDataListURL: '/tccc/getTelCdrs',
  getDataListIsPage: true,
  deleteIsBatch: true,
  daterange: null,
  dataForm: {
    limit: 10,
    directionId: "",
    endStatusId: "",
    startDate: new Date(), // 这里设置为当前日期
    endDate: new Date(),   // 这里设置为当前日期
    caller: "",
    callee: "",
    caller2: "",
    callee2: "",
    userName: "",
    id: "",
    phone: "",
  },
  phoneList: null as any,
});
//呼叫类型
const options = ref([
  { id: 0, name: '呼入' },
  { id: 1, name: '呼出' },
]);

//呼叫状态
const options2 = ref([
  { id: 0, name: '错误' },
  { id: 1, name: '正常结束' },
  { id: 2, name: '未接通' },
  { id: 17, name: '坐席未接' },
  { id: 100, name: 'VR 期间用户放弃' },
  { id: 101, name: '会话排队期间用户放弃' },
  { id: 102, name: '会话振铃期间用户放弃' },
  { id: 103, name: '无坐席在线' },
  { id: 104, name: '非工作时间' },
  { id: 105, name: 'IVRH后直接结束' },
  { id: 106, name: '未知状态' },
  { id: 107, name: '未接听' },
  { id: 201, name: '拒接挂断' },
  { id: 204, name: '关机' },
  { id: 205, name: '空号' },
  { id: 206, name: '通话中' },
  { id: 207, name: '欠费' },
  { id: 208, name: '运营商线路异常' },
  { id: 209, name: '主叫取消' },
  { id: 210, name: '不在服务区' },

]);

const options2iphone = ref([]);


//拨打电话
const makeCall = () => {
  const phone = state.dataForm.callee2;
  if (!phone) {
    ElMessage.error("被叫号码不能为空！");
    return;
  }
  if (phone.length < 10) {
    ElMessage.error("被叫号码格式不正确！");
    return;
  }
  // 判断字符串是否为数字
  var re = /^[0-9]+.?[0-9]*/;
  if (!re.test(phone)) {
    ElMessage.error("只能输数字！");
    return;
  }

  // 呼叫号码
  let callerPhoneNumber = state.dataForm.caller2;
  let callOutParams: { phoneNumber: string; callerPhoneNumber?: string } = { phoneNumber: phone };
  // 有值的话，取第二个值并添加到参数中
  if (callerPhoneNumber) {
    callerPhoneNumber = callerPhoneNumber[1];
    callOutParams.callerPhoneNumber = "0086" + callerPhoneNumber;
  }
  baseService.get("/tccc/checkcallPhone?callee=" + phone).then((res: any) => {
    if (res.count > 2) {
      ElMessage.error("同一个被叫号码当日限制外呼两次，请注意频次，避免投诉！");
      return;
    } else {
      // 开始外呼
      const reponse = (window as any).tccc.callOut(callOutParams);
      reponse.then((res: any) => {

      })
      .catch((err: any) => {
          console.log(err);
        })
    }
  });
};


//重置
const reset = () => {
  state.dataForm.directionId = "";
    state.dataForm.endStatusId = "";
    state.dataForm.caller = "";
  state.dataForm.callee = "";
    state.dataForm.userName = "";
}


//获取主叫号码
const getTccPhone = () => {
  baseService.get("/tccc/getTccPhone").then((res) => {
    //数组增加元素
    options2iphone.value = res.data.list;
  });
};


//初始化
const init = () => {
  getTccPhone();
};

const state = reactive({ ...useView(view), ...toRefs(view) });
const addKey = ref(0);
const addOrUpdateRef = ref();
const addOrUpdateHandle = (id?: number) => {
  addKey.value++;
  nextTick(() => {
    addOrUpdateRef.value.init(id);
  });
};

//页面进入执行
init();

</script>
<style lang="scss" scoped>
.el-input {
  width: 180px;
}
.el-select{
  width: 190px;
}

::v-deep .video {
  width: 170px;
  height: 25px;
}
</style>
